import { computed, defineComponent, h, ref, VNode } from 'vue'
import styles from './index.module.scss'
import * as vicon from '@vicons/ionicons5'
import { NTree, NButton, NIcon, TreeOption } from 'naive-ui'
import { useDepartment } from './use-department'
import { Department } from '@/service/modules/department/types'
import AddDepartmentModal from '../../dialog/add-department-modal'
import EditDepartmentModal from '../../dialog/edit-department-modal'

function renderIcon(iconName: string) {
  const icon = vicon[iconName]
  return () => h(NIcon, { size: 20 }, { default: () => h(icon) })
}

const DepartmentManageTab = defineComponent({
  name: 'DepartmentManageTab',
  setup() {
    const { departmentVariables, getDepartmentOptions, delDepartment } =
      useDepartment()
    getDepartmentOptions()
    const departments = computed((): TreeOption[] => {
      const rootDepartment: TreeOption[] = [
        {
          label: window.$t('department.rootDepartment'),
          key: -1,
          children: [],
          suffix: () =>
            h(
              'div',
              {
                style: { paddingRight: '300px' }
              },
              createDepartmentBtn({
                id: -1,
                parentId: 0,
                parentIds: [],
                name: '',
                subs: [],
                createTime: 0,
                updateTime: 0
              })
            )
        }
      ]
      genDepartmentTree(
        rootDepartment[0],
        departmentVariables.departmentOptions
      )
      return rootDepartment
    })
    //生成菜单树
    const genDepartmentTree = (parent: TreeOption, childs: Department[]) => {
      childs?.forEach((item) => {
        const childOption: TreeOption = {
          label: item.name,
          key: item.id,
          children: [],
          suffix: () =>
            h(
              'div',
              {
                style: { paddingRight: '300px' }
              },
              createDepartmentBtn(item)
            )
        }
        parent.children?.push(childOption)
        genDepartmentTree(childOption, item.subs)
      })
    }
    //创建菜单按钮
    const createDepartmentBtn = (item: Department): VNode[] => {
      return [
        h(
          NButton,
          {
            size: 'small',
            style: {
              marginRight: '3px'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'success',
            title: window.$t('department.addDepartment'),
            onClick: () => {
              handleAddDepartment(item.id)
            }
          },
          renderIcon('Add')
        ),
        h(
          NButton,
          {
            size: 'small',
            style: {
              marginRight: '3px',
              visibility: item.id !== -1 ? 'visible ' : 'hidden'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'warning',
            title: window.$t('department.editDepartment'),
            onClick: () => {
              handleEditDepartment(item)
            }
          },
          renderIcon('Pencil')
        ),
        h(
          NButton,
          {
            size: 'small',
            style: {
              marginRight: '3px',
              visibility: item.id !== -1 ? 'visible ' : 'hidden'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'error',
            title: window.$t('department.delDepartment'),
            onClick: () => {
              handleDelDepartment(item.id, item.name)
            }
          },
          renderIcon('Remove')
        )
      ]
    }
    const defaultExpandedKeys = ref([-1])
    //操作的部门id
    const selectedDepartmentIdRef = ref(0)
    //显示添加子部门弹窗
    const showAddDepartmentModalRef = ref(false)
    const handleAddDepartment = (departmentId: number) => {
      selectedDepartmentIdRef.value = departmentId
      showAddDepartmentModalRef.value = true
    }
    //显示编辑部门弹窗
    //操作的部门
    const selectedDepartmentRef = ref({})
    const showEditDepartmentModalRef = ref(false)
    const handleEditDepartment = (department: Department) => {
      selectedDepartmentRef.value = department
      showEditDepartmentModalRef.value = true
    }
    //显示删除菜单确认弹窗
    const handleDelDepartment = (id: number, name: String) => {
      window.$dialog.warning({
        title: window.$t('dialog.warningTitle'),
        content: window.$t('department.delDepartmentWarning') + name,
        positiveText: window.$t('dialog.positiveText'),
        negativeText: window.$t('dialog.negativeText'),
        onPositiveClick: () => {
          delDepartment(id)
        }
      })
    }
    return {
      departments,
      defaultExpandedKeys,
      showAddDepartmentModalRef,
      selectedDepartmentIdRef,
      showEditDepartmentModalRef,
      selectedDepartmentRef,
      getDepartmentOptions
    }
  },

  methods: {
    handleAddDepartmentModalShowChange() {
      this.showAddDepartmentModalRef = !this.showAddDepartmentModalRef
    },
    handleEditDepartmentModalShowChange() {
      this.showEditDepartmentModalRef = !this.showEditDepartmentModalRef
    },
    handleRefreshTree() {
      this.getDepartmentOptions()
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <NTree
          block-line
          data={this.departments}
          default-expanded-keys={this.defaultExpandedKeys}
          selectable={false}
        ></NTree>
        <AddDepartmentModal
          showModal={this.showAddDepartmentModalRef}
          onModalShowChange={this.handleAddDepartmentModalShowChange}
          onRefreshTree={this.handleRefreshTree}
          parentId={this.selectedDepartmentIdRef}
        ></AddDepartmentModal>
        <EditDepartmentModal
          showModal={this.showEditDepartmentModalRef}
          onModalShowChange={this.handleEditDepartmentModalShowChange}
          onRefreshTree={this.handleRefreshTree}
          department={this.selectedDepartmentRef}
        ></EditDepartmentModal>
      </div>
    )
  }
})

export default DepartmentManageTab
